<template>
  <div class="incomeFlow">
    <el-form :model="params" ref="params" inline>
      <el-form-item label="业务类型:" label-width="100px" prop="businessType">
        <el-select v-model="params.businessType" placeholder="请选择业务类型" clearable>
          <el-option
            v-for="item in businessTypeList"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()" size="small">搜索</el-button>
        <!-- <el-button type="primary" @click="drawcashDialog()" size="small">提 现</el-button> -->
      </el-form-item>
    </el-form>
    <!-- <el-row>
      <el-col :span="12">余额:{{amount}}</el-col>
      <el-col :span="12">总额:{{totalAmount}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">分销总额:{{totalDistributeFee}}</el-col>
      <el-col :span="12">咨询总额:{{totalReplyFee}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="12">已结算:{{hasSettlement}}</el-col>
      <el-col :span="12">是否发起了提现申请:{{isApplyDrawCash?"是":"否"}}</el-col>
    </el-row>
    <el-row> -->
      <!-- <el-col :span="12">
           <el-button type="primary" @click="drawcashDialog()" size="small">提 现</el-button>
      </el-col>-->
    <!-- </el-row> -->
    <!-- 列表 -->
    <el-card class="box-card">
      <div class="boxcard-body">
        <div class="tableList">
          <el-table :data="list" border style="width: 100%">
            <el-table-column type="index" label="排序" width="50"></el-table-column>
            <el-table-column prop="businessTypeName" label="业务类型" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="accountType" label="账务类型" width="130" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.accountType==1?'收入':'支出' }}</template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="businessDay" label="交易日期" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="客户名称" width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="avatarUrl" label="微信头像" width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <img :src="scope.row.avatarUrl" width="80" height="80" />
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="pageChange"
              :total="total"
              :current-page.sync="pageNum"
              :page-sizes="[10, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";

export default {
  components: {},
  // id即编辑的id，visible属性用来监听是否显示弹窗
  watch: {},
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    }
  },
  data() {
    return {
      params: {
        businessType: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 弹窗相关属性
      dialogFieldBox: false,

      amount: null,
      totalAmount: null,
      totalDistributeFee: null,
      totalReplyFee: null,
      hasSettlement: null,
      isApplyDrawCash: false,
      list: [],
      dialogDrawCashEdit: false,
      id: null,
      type: "",
      businessTypeList: [
        { key: 1, label: "分销收入" },
        { key: 2, label: "咨询收入" },
        { key: 3, label: "提取" }
      ]
    };
  },
  methods: {
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    getList() {
      let url = "doctorRole/pageIncomeFlow";
      this.$https
        .get(url, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          businessType: this.params.businessType
        })
        .then(res => {
          this.list = res.data.data.list;
          // 自定义下标
          this.list.forEach((e, idx) => {
            e.idx = (idx + 1) * this.pageNum;
          });
          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
          // this.amount = res.data.extra.amount;
          // this.totalAmount = res.data.extra.totalAmount;
          // this.totalDistributeFee = res.data.extra.totalDistributeFee;
          // this.totalReplyFee = res.data.extra.totalReplyFee;
          // this.hasSettlement = res.data.extra.hasSettlement;
          // this.isApplyDrawCash = res.data.extra.isApplyDrawCash;
        });
    },
    initIncomeFlow(id, type) {
      this.id = id;
      this.type = type;
      this.getList();
    }
    // drawcashDialog() {
    //   this.dialogDrawCashEdit = true;
    //   this.$refs.drawCashEdit.initEdit(this.id, this.type);
    // }
  },
  created() {
    this.getList();
  },
  mounted() {}
};
</script>

<style lang="less">
</style>
